<form [attr.id]="id"
      [formGroup]="formGroup">
  <ng-container *ngFor="let field of config">
    <ng-container [ngTemplateOutlet]="renderFormField"
                  [ngTemplateOutletContext]="{ $implicit: field }">
    </ng-container>
  </ng-container>
</form>

<ng-template #renderFormField
             let-field>
  <ng-container [ngSwitch]="field.type">
    <ng-template [ngSwitchCase]="'button'">
      <omv-form-button [config]="field"
                       [formGroup]="formGroup">
      </omv-form-button>
    </ng-template>

    <ng-template [ngSwitchCase]="'iconButton'">
      <omv-form-icon-button [config]="field"
                            [formGroup]="formGroup">
      </omv-form-icon-button>
    </ng-template>

    <ng-template [ngSwitchCase]="'textInput'">
      <omv-form-text-input [config]="field"
                           [formGroup]="formGroup">
      </omv-form-text-input>
    </ng-template>

    <ng-template [ngSwitchCase]="'numberInput'">
      <omv-form-number-input [config]="field"
                             [formGroup]="formGroup">
      </omv-form-number-input>
    </ng-template>

    <ng-template [ngSwitchCase]="'folderBrowser'">
      <omv-form-folderbrowser [config]="field"
                              [formGroup]="formGroup">
      </omv-form-folderbrowser>
    </ng-template>

    <ng-template [ngSwitchCase]="'checkbox'">
      <omv-form-checkbox [config]="field"
                         [formGroup]="formGroup">
      </omv-form-checkbox>
    </ng-template>

    <ng-template [ngSwitchCase]="'passwordInput'">
      <omv-form-password-input [config]="field"
                               [formGroup]="formGroup">
      </omv-form-password-input>
    </ng-template>

    <ng-template [ngSwitchCase]="'textarea'">
      <omv-form-textarea [config]="field"
                         [formGroup]="formGroup">
      </omv-form-textarea>
    </ng-template>

    <ng-template [ngSwitchCase]="'select'">
      <omv-form-select [config]="field"
                       [formGroup]="formGroup">
      </omv-form-select>
    </ng-template>

    <ng-template [ngSwitchCase]="'sharedFolderSelect'">
      <omv-form-sharedfolder-select [config]="field"
                                    [formGroup]="formGroup">
      </omv-form-sharedfolder-select>
    </ng-template>

    <ng-template [ngSwitchCase]="'sshCertSelect'">
      <omv-form-sshcert-select [config]="field"
                               [formGroup]="formGroup">
      </omv-form-sshcert-select>
    </ng-template>

    <ng-template [ngSwitchCase]="'sslCertSelect'">
      <omv-form-sslcert-select [config]="field"
                               [formGroup]="formGroup">
      </omv-form-sslcert-select>
    </ng-template>

    <ng-template [ngSwitchCase]="'divider'">
      <omv-form-divider [config]="field"
                        [formGroup]="formGroup">
      </omv-form-divider>
    </ng-template>

    <ng-template [ngSwitchCase]="'paragraph'">
      <omv-form-paragraph [config]="field"
                          [formGroup]="formGroup">
      </omv-form-paragraph>
    </ng-template>

    <ng-template [ngSwitchCase]="'datePicker'">
      <omv-form-datepicker [config]="field"
                           [formGroup]="formGroup">
      </omv-form-datepicker>
    </ng-template>

    <ng-template [ngSwitchCase]="'datatable'">
      <omv-form-datatable [config]="field"
                          [formGroup]="formGroup">
      </omv-form-datatable>
    </ng-template>

    <ng-template [ngSwitchCase]="'slider'">
      <omv-form-slider [config]="field"
                       [formGroup]="formGroup">
      </omv-form-slider>
    </ng-template>

    <ng-template [ngSwitchCase]="'container'">
      <div class="omv-form-container"
           fxLayout="row">
        <div *ngFor="let innerField of field.fields"
             class="omv-form-container-item"
             [fxFlex]="innerField.flex ? innerField.flex : ''">
          <ng-container [ngTemplateOutlet]="renderFormField"
                        [ngTemplateOutletContext]="{ $implicit: innerField }">
          </ng-container>
        </div>
      </div>
    </ng-template>

    <ng-template [ngSwitchCase]="'fileInput'">
      <omv-form-file-input [config]="field"
                           [formGroup]="formGroup">
      </omv-form-file-input>
    </ng-template>
  </ng-container>
</ng-template>
